<template>
    <tm-app class="phoneLogin" bgImg="white">
        <view style="height:var(--status-bar-height)"></view>
        <tm-navbar style="postion:relative;z-index:10;" :height="50" :margin="[0,0]" :padding="[0,0]" :fontSize="32" title="修改密码" :transprent="true">
		</tm-navbar>
        <view class="content psr">
            <!-- <view class="title_main">手机号登录</view> -->
            <view class="inps">
                <view class="inp_box d-flex a-center">
                    <view class="pre d-flex a-center j-center">
                        <view class="txt d-flex a-center j-center">+86</view>
                        <view style="height:40rpx;border-right:1px solid#ccc;"></view>
                    </view>
					<view class="inp">{{showPheone}}</view>
                </view>
				<uni-forms ref="form" err-show-type="toast" label-width="0" :modelValue="formData" :rules="rules">
					<uni-forms-item name="vailCode">
						<view class="inp_box d-flex a-center" style="margin-top:20rpx;">
						    <view class="pre d-flex a-center j-center">
						        <view class="txt d-flex a-center j-center">
						            <i class="tmicon tmicon-key" style="font-size:30rpx;"></i>
						        </view>
						        <view style="height:40rpx;border-right:1px solid#ccc;"></view>
						    </view>
						    <input :adjust-position="false" maxlength="6" type="number" class="inp" style="width:280rpx;" v-model="formData.vailCode" placeholder="请输入验证码"/>
						    <view v-show="showGetCode" class="btn d-flex a-center j-center" @tap="getCode">
						        <text class="text1">获取验证码</text>
						    </view>
						    <view v-show="!showGetCode" class="btn seconds d-flex a-center">{{ seconds }}</view>
						</view>
					</uni-forms-item>
					<uni-forms-item name="password">
						<view class="inp_box d-flex a-center" style="margin-top:20rpx;">
						    <view class="pre d-flex a-center j-center">
						        <view class="txt d-flex a-center j-center">
						            <i class="tmicon tmicon-lock" style="font-size:30rpx;"></i>
						        </view>
						        <view style="height:40rpx;border-right:1px solid#ccc;"></view>
						    </view>
						    <input :adjust-position="false" :type="inpType1" class="inp" style="width:370rpx;"  v-model="formData.password" placeholder="请输入密码"/>
						    <view class="btn btn1 d-flex a-center j-center" @tap="triggleType1">
						        <i class="tmicon tmicon-eye-fill" ></i>
						    </view>
						</view>
					</uni-forms-item>
					<uni-forms-item name="passwords">
						<view class="inp_box d-flex a-center" style="margin-top:20rpx;">
						    <view class="pre d-flex a-center j-center">
						        <view class="txt d-flex a-center j-center">
						            <i class="tmicon tmicon-lock" style="font-size:30rpx;"></i>
						        </view>
						        <view style="height:40rpx;border-right:1px solid#ccc;"></view>
						    </view>
						    <input :adjust-position="false" :type="inpType2" class="inp" style="width:370rpx;"  v-model="formData.passwords" placeholder="请再次输入密码"/>
						    <view class="btn btn1 d-flex a-center j-center" @tap="triggleType2">
						        <i class="tmicon tmicon-eye-fill" ></i>
						    </view>
						</view>
					</uni-forms-item>
				</uni-forms>
            </view>

            <view class="btn_main d-flex a-center j-center" @tap="submit">确认修改</view>

        </view>
    </tm-app>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { resetPassword,getVerCode,getUserDetail } from "@/api/api";
import { userData as userDataStore }  from '@/store/userData'
import md5 from 'js-md5';
import { onShow } from "@dcloudio/uni-app";
import { desensitizePhone } from "@/utils/format";

const userData:any = userDataStore();
const seconds = ref(60);
const showGetCode = ref(true);

const form = ref();

const formData: any = ref({
	vailCode:"",
	password:"",
	passwords:""
})
//验证
const rules: any = ref({
	vailCode: {
		rules: [{
				required: true,
				errorMessage: "请输入验证码",
			},
			{
				minLength: 6,
				maxLength: 6,
				errorMessage: "请输入6位验证码",
			}
		]
	},
	password: {
		rules: [{
				required: true,
				errorMessage: "请输入新密码",
			},
			{
				pattern: /^[0-9a-zA-Z!@#$%^&*()_+]{6,16}$/,
				errorMessage: "密码只能包含数字、英文或特殊字符",
			},
			{
				minLength: 6,
				maxLength: 16,
				errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
			}
		]
	},
	passwords:{
		rules:[{
				required: true,
				errorMessage: "请输再次入新密码",
			},
			{
			validateFunction:(rule: any,value: any,data: any,callback: any) =>{
				if(data.password!=value){
					callback("两次密码不一致")
				}
			}
		}]
	}
})
let userInfo: any = ref({});
const showPheone = ref();
onShow(() => {
	getUserDetail({id:userData.id}).then((res: any) => {
		userInfo.value = res.data;
		showPheone.value = desensitizePhone(userInfo.value.phone)
	});
});
const inpType1 = ref('password');
const triggleType1 = () => {
	inpType1.value = inpType1.value === 'password'?'text':'password';
}

const inpType2 = ref('password');
const triggleType2 = () => {
	inpType2.value = inpType2.value === 'password'?'text':'password';
}

const getCode = async ()=>{
    seconds.value = 60;
    showGetCode.value = true;

    const res:any = await getVerCode({phone:userInfo.value.phone,messageType:'3'});
    const { flag } = res;
    if(flag===1){
        uni.showToast({
            icon: "none",
            title: '验证码已成功发送',
            duration: 1500,
        });
        showGetCode.value = false;
        let int = setInterval(()=>{

            if(seconds.value===1){
                showGetCode.value = true;
                clearInterval(int);
                return
            }

            seconds.value = seconds.value-1
        },1000)
    }
    
}
//修改密码
const submit = ()=>{
	form.value.validate().then((data: any)=>{
		data.phone = userInfo.value.phone;
		data.authCode = md5(data.vailCode);
		resetPassword(data).then((res: any) => {
			if(res.success){
				uni.showToast({
				    title: res.message,  
				    icon: 'success',  
				    duration: 2000,
				});
				setTimeout(function() {
					uni.navigateBack({delta: 1});
				}, 500);
			}else{
				uni.showToast({
				    title: res.message,  
				    icon: 'error',  
				    duration: 2000  
				});
			}
		});
	})
}
</script>

<style lang="scss" scoped>
@import './changePassword.scss';
</style>
